/**
 * 课程表
 * Created by xxx on 2017/7/13.
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
import {
    HttpService,
    getLocalTime,
    Tips,
    getClassList
} from '../Tools'

import Header from './Common/Header'
import Footer from './Common/Footer'

export default class ScoreDetail extends Component {
    constructor(props) {
        super(props);
        this.classid = '';
        this.teacherstyle = '';
        this.rowspan = [];
        this.maxHeight = 1;
        this.state = {
            dataList: [],
            classList: [],
            day: 0,
            dayindex: new Date().getDay() == 0 ? 7 : new Date().getDay() - 1,
            sltclass: 'none'
        }
    }
    componentWillMount() {
        if (sessionStorage.userrole == '家长') {
            this.classid = sessionStorage.classid
        } else {
            getClassList((classList) => {
                this.setState({
                    classList
                })
            });
        }
        this.getCourse();
    }
    componentDidMount() {
        if (document.querySelectorAll('#dayttile li')[this.state.dayindex])
            document.querySelectorAll('#dayttile li')[this.state.dayindex].className = 'select'
        this.dealStyle();
    }

    //比较大小
    compareNum(len) {
        if (len > this.maxHeight)
            this.maxHeight = len
    }

    //优化样式
    dealStyle() {
        this.rowspan.map((item, index) => {
            let span = item;
            if (index > 0)
                span = item - this.rowspan[index - 1] + 1
            if (item > 0)
                $('#pjb_courselist .rowspan').eq(index).attr('rowspan', span)
        })
        if (this.maxHeight > 1)
            $('#pjb_courselist tr td').css('height', this.maxHeight * 1.5 + 'em')
    }
    //获取课程
    getCourse() {
        let data = {
            jybTicket: sessionStorage.ticket,
            method: 'ajaxJybJSON_LoadClassCourseTable'
        };
        if (this.classid != '') { //我的课表
            data.clsid = this.classid;
        } else if (sessionStorage.userrole != '家长') {
            data.method = 'ajaxJybJSON_LoadTeacherCourseTable'
        }

        HttpService.query({
            url: '/jxt-commonbackground/ajaxLoaderSchoolCourseInfo.do',
            data,
            async: false,
            success: (res => {
                if (res.code == 0 && res.r && res.r.classCourseList) {
                    this.setState({
                        dataList: res.r.classCourseList
                    })
                    if (res.r.classCourseList.length != 0)
                        setTimeout(() => {
                            if (document.querySelector('#dayttile .select'))
                                document.querySelector('#dayttile .select').className = ''
                            document.querySelectorAll('#dayttile li')[this.state.dayindex].className = 'select'
                        }, 10)
                } else {
                    this.setState({
                        dataList: []
                    })
                    Tips(res.msg);
                }
            })
        })
    }

    //单日显示操作
    setDay(index) {
        if (document.querySelector('#dayttile .select'))
            document.querySelector('#dayttile .select').className = ''
        document.querySelectorAll('#dayttile li')[index].className = 'select'
        this.setState({
            dayindex: index
        });
    }
    //显示：单日/一周
    setView(index) {
        document.querySelector('#dayview .select').className = ''
        document.querySelectorAll('#dayview div')[index].className = 'select'
        $('.coursefrom').hide();
        this.setState({
            day: index
        });
        setTimeout(() => {
            document.querySelectorAll('#dayttile li')[this.state.dayindex].className = 'select'
            if (index == 1) this.dealStyle()
            $('.coursefrom').eq(index).show()
        }, 10)
    }
    //选择班级
    sltClass(e) {
        this.classid = e.currentTarget.value
        let obj = e.currentTarget
        document.querySelector('.h_title span').innerHTML = obj.options[obj.selectedIndex].text
        this.getCourse();
    }


    render() {
        let num = 1,
            title = '我的课表',
            classTagList;
        const {
            dataList,
            day,
            dayindex,
            sltclass,
            classList
        } = this.state;

        if (sessionStorage.userrole != '家长') {
            title = null;
            classTagList = classList.map((item, index) => {
                let itemName = item.name
                if (classList.length == 1)
                    itemName = '班级课表'
                return (
                    <option value={item.id}>{itemName}</option>
                )
            })
        }

        const dataTagList = dataList.map((item, index) => {
            if ($('#dayview .select').index() == 0)
                return
            let timeQuantum = <td className='rowspan'>{item.timeQuantum}</td>
            if (index > 0) {
                if (item.timeQuantum != '') {
                    if (item.timeQuantum == dataList[index - 1].timeQuantum) {
                        timeQuantum = null
                        num++;
                    } else {
                        timeQuantum = <td className='rowspan'>{item.timeQuantum}</td>
                        this.rowspan.push(num)
                    }
                } else {
                    timeQuantum = <td>{item.timeQuantum}</td>
                }
                if (index == dataList.length - 1)
                    this.rowspan.push(num)
            }
            this.compareNum(item.mondayCourse.split('|').length)
            this.compareNum(item.tuesdayCourse.split('|').length)
            this.compareNum(item.wednesdayCourse.split('|').length)
            this.compareNum(item.thursdayCourse.split('|').length)
            this.compareNum(item.fridayCourse.split('|').length)
            this.compareNum(item.saturdayCourse.split('|').length)
            this.compareNum(item.sundayCourse.split('|').length)
            return (
                <tr>
                    {timeQuantum}
                    <td>{item.section}</td>
                    <td>{item.courseTime}</td>
                    <td dangerouslySetInnerHTML={{__html: item.mondayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.tuesdayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.wednesdayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.thursdayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.fridayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.saturdayCourse.replace(/\|/g,'<br/>')}}></td>
                    <td dangerouslySetInnerHTML={{__html: item.sundayCourse.replace(/\|/g,'<br/>')}}></td>
                </tr>
            )
        })
        const dayTagList = dataList.map((item, index) => {
            if ($('#dayview .select').index() == 1)
                return
            let posi = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'][dayindex] + 'Course'
            let course = item[posi].split('/')[0]
            let teacher = item[posi].split('/')[1]
            if (course == '')
                return
            return (
                <li className={'day_list ' + this.teacherstyle}>
                    <div className="timetable_index">{item.timeQuantum}</div>
                    <div className="space"/>
                    <div className="timetable_info">
                        <span className="title">{course}</span>
                        <span className="teacher">{teacher}</span>
                        <span className="time">{item.courseTime}</span>
                    </div>
                </li>
            )
        })

        return (
            <div className='subject_timetable_page'>
                <Header title={title} appLink='1'>
                    <span>我的课表</span><br/>
                    <select dir="rtl" className="sltbox" onChange={this.sltClass.bind(this)}>
                        <option value=''>我的课表</option>
                        {classTagList}
                    </select>
                </Header>
                {dataList.length >0
                    ? <div>
                            <div className="timetable_type" id='dayview'>
                                <div className="select" onClick={this.setView.bind(this, 0)}>单日</div>
                                <div onClick={this.setView.bind(this, 1)}>一周</div>
                            </div>
                            <div>
                                <div className="timetable_day coursefrom">
                                    <ul className="title" id='dayttile'>
                                        <li onClick={this.setDay.bind(this, 0)}>一</li>
                                        <li onClick={this.setDay.bind(this, 1)}>二</li>
                                        <li onClick={this.setDay.bind(this, 2)}>三</li>
                                        <li onClick={this.setDay.bind(this, 3)}>四</li>
                                        <li onClick={this.setDay.bind(this, 4)}>五</li>
                                        <li onClick={this.setDay.bind(this, 5)}>六</li>
                                        <li onClick={this.setDay.bind(this, 6)}>日</li>
                                    </ul>
                                    <ul className="content">
                                        {dayTagList}
                                    </ul>
                                </div>
                                <div className="timetable_week coursefrom" style={{display:'none'}}>
                                    <table id='pjb_courselist'>
                                        <tr>
                                            <th>时间段</th>
                                            <th>节次</th>
                                            <th>时间点</th>
                                            <th>星期一</th>
                                            <th>星期二</th>
                                            <th>星期三</th>
                                            <th>星期四</th>
                                            <th>星期五</th>
                                            <th>星期六</th>
                                            <th>星期日</th>
                                        </tr>
                                        {dataTagList}
                                    </table>
                                </div>
                            </div>
                        </div>
                    : <div className='datastatus'>
                        <span className='no'>暂无信息</span>
                    </div>}
            </div>
        )
    }
}
